<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数据统计 - 废物回收管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <style>
        body {
            background-color: #f8f9fa;
        }
        .statistics-container {
            max-width: 1200px;
            margin: 2rem auto;
        }
        .stats-card {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: transform 0.2s;
        }
        .stats-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .stats-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }
        .stats-value {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
        .stats-label {
            color: #6c757d;
            font-size: 0.9rem;
        }
        .chart-card {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .chart-container {
            height: 400px;
        }
        .trend-up {
            color: #198754;
        }
        .trend-down {
            color: #dc3545;
        }
        .filter-card {
            background: white;
            border-radius: 15px;
            padding: 1rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/resident">
                <i class="fas fa-recycle me-2"></i>废物回收管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/resident">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/orders/create">预约回收</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/category/guide">分类指南</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container statistics-container">
        <!-- 时间筛选 -->
        <div class="filter-card">
            <div class="row align-items-center">
                <div class="col-md-auto">
                    <label class="form-label mb-0">统计时间：</label>
                </div>
                <div class="col-md-auto">
                    <select class="form-select" id="timeRange" onchange="updateStatistics()">
                        <option value="today">今日</option>
                        <option value="week">本周</option>
                        <option value="month" selected>本月</option>
                        <option value="year">本年</option>
                    </select>
                </div>
                <div class="col-md-auto">
                    <div class="form-check form-check-inline mb-0">
                        <input class="form-check-input" type="checkbox" id="compareLastPeriod" onchange="updateStatistics()">
                        <label class="form-check-label">与上期比较</label>
                    </div>
                </div>
            </div>
        </div>

        <!-- 数据概览 -->
        <div class="row">
            <div class="col-md-3">
                <div class="stats-card">
                    <div class="stats-icon" style="background-color: #e7f1ff; color: #0d6efd;">
                        <i class="fas fa-box"></i>
                    </div>
                    <div class="stats-value" th:text="${totalOrders}">1,234</div>
                    <div class="stats-label">总订单数</div>
                    <div class="trend-up mt-2">
                        <i class="fas fa-arrow-up"></i>
                        <span th:text="${orderGrowth + '%'}">12.5%</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card">
                    <div class="stats-icon" style="background-color: #fff3cd; color: #ffc107;">
                        <i class="fas fa-weight-hanging"></i>
                    </div>
                    <div class="stats-value" th:text="${totalWeight + 'kg'}">2,560kg</div>
                    <div class="stats-label">回收总重量</div>
                    <div class="trend-up mt-2">
                        <i class="fas fa-arrow-up"></i>
                        <span th:text="${weightGrowth + '%'}">8.3%</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card">
                    <div class="stats-icon" style="background-color: #d1e7dd; color: #198754;">
                        <i class="fas fa-coins"></i>
                    </div>
                    <div class="stats-value" th:text="${'¥' + totalIncome}">¥15,680</div>
                    <div class="stats-label">总收益</div>
                    <div class="trend-up mt-2">
                        <i class="fas fa-arrow-up"></i>
                        <span th:text="${incomeGrowth + '%'}">15.2%</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card">
                    <div class="stats-icon" style="background-color: #f8d7da; color: #dc3545;">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="stats-value" th:text="${activeUsers}">856</div>
                    <div class="stats-label">活跃用户数</div>
                    <div class="trend-up mt-2">
                        <i class="fas fa-arrow-up"></i>
                        <span th:text="${userGrowth + '%'}">5.8%</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 趋势图表 -->
        <div class="row">
            <div class="col-md-8">
                <div class="chart-card">
                    <h5 class="mb-4">订单趋势</h5>
                    <div id="orderTrendChart" class="chart-container"></div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="chart-card">
                    <h5 class="mb-4">回收物品分布</h5>
                    <div id="categoryPieChart" class="chart-container"></div>
                </div>
            </div>
        </div>

        <!-- 详细数据 -->
        <div class="row">
            <div class="col-md-6">
                <div class="chart-card">
                    <h5 class="mb-4">回收站统计</h5>
                    <div id="stationBarChart" class="chart-container"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="chart-card">
                    <h5 class="mb-4">每日回收重量</h5>
                    <div id="weightLineChart" class="chart-container"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script th:inline="javascript">
        // 初始化图表
        const orderTrendChart = echarts.init(document.getElementById('orderTrendChart'));
        const categoryPieChart = echarts.init(document.getElementById('categoryPieChart'));
        const stationBarChart = echarts.init(document.getElementById('stationBarChart'));
        const weightLineChart = echarts.init(document.getElementById('weightLineChart'));

        // 订单趋势图配置
        const orderTrendOption = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['订单数', '完成率']
            },
            xAxis: {
                type: 'category',
                data: /*[[${trendDates}]]*/ ['1月', '2月', '3月', '4月', '5月', '6月']
            },
            yAxis: [
                {
                    type: 'value',
                    name: '订单数'
                },
                {
                    type: 'value',
                    name: '完成率',
                    min: 0,
                    max: 100,
                    axisLabel: {
                        formatter: '{value}%'
                    }
                }
            ],
            series: [
                {
                    name: '订单数',
                    type: 'bar',
                    data: /*[[${orderCounts}]]*/ [150, 180, 200, 250, 280, 300]
                },
                {
                    name: '完成率',
                    type: 'line',
                    yAxisIndex: 1,
                    data: /*[[${completionRates}]]*/ [85, 88, 87, 90, 92, 93]
                }
            ]
        };

        // 回收物品分布图配置
        const categoryPieOption = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    type: 'pie',
                    radius: '70%',
                    data: /*[[${categoryData}]]*/ [
                        {value: 35, name: '纸类'},
                        {value: 25, name: '塑料'},
                        {value: 20, name: '金属'},
                        {value: 15, name: '电器'},
                        {value: 5, name: '其他'}
                    ]
                }
            ]
        };

        // 回收站统计图配置
        const stationBarOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: /*[[${stationNames}]]*/ ['站点1', '站点2', '站点3', '站点4', '站点5']
            },
            series: [
                {
                    type: 'bar',
                    data: /*[[${stationOrders}]]*/ [120, 200, 150, 80, 70]
                }
            ]
        };

        // 每日回收重量图配置
        const weightLineOption = {
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: /*[[${weightDates}]]*/ ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value',
                name: '重量(kg)'
            },
            series: [
                {
                    type: 'line',
                    data: /*[[${dailyWeights}]]*/ [120, 132, 101, 134, 90, 230, 210]
                }
            ]
        };

        // 渲染图表
        orderTrendChart.setOption(orderTrendOption);
        categoryPieChart.setOption(categoryPieOption);
        stationBarChart.setOption(stationBarOption);
        weightLineChart.setOption(weightLineOption);

        // 更新统计数据
        function updateStatistics() {
            const timeRange = document.getElementById('timeRange').value;
            const compareLastPeriod = document.getElementById('compareLastPeriod').checked;

            fetch(`/api/statistics/data?timeRange=${timeRange}&compare=${compareLastPeriod}`)
                .then(response => response.json())
                .then(data => {
                    // 更新数据概览
                    updateOverview(data.overview);
                    // 更新图表
                    updateCharts(data.charts);
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }

        // 窗口大小改变时重绘图表
        window.addEventListener('resize', function() {
            orderTrendChart.resize();
            categoryPieChart.resize();
            stationBarChart.resize();
            weightLineChart.resize();
        });
    </script>
</body>
</html> 